Position
> Last Format Time：6/12/2026 20:14:29
https://developer.mozilla.org/zh-CN/docs/Web/CSS/Reference/Properties/position
常规流定位
CSS 的 position 属性决定了元素在页面上的布局方式。有 5 个。
static（默认值）
- 定位方式： 这是所有元素的默认状态。元素会按照 HTML 的文档流顺序，从上到下、从左到右正常排列。
- 特点：
- 设置
top、right、bottom、left和z-index无效。 - 元素始终处于正常的文档流中，不会被移动。
- 设置
脱离常规流定位
relative（相对定位）
- 定位方式： 元素相对于它自己在文档流中的原始位置进行偏移。
- 特点：
- 通过
top、left等属性移动位置。 - 关键点： 虽然视觉上元素移动了，但它原本占据的空间依然被保留（就像它还在原地，只是灵魂出窍飘走了），不会影响周围其他元素的布局。
- 常用来作为
absolute子元素的定位基准（父相子绝）。
- 通过
absolute（绝对定位）
在使用 absolute 时，最经典的布局套路就是 "父相子绝" —— 给父元素设置 position: relative（但不设置偏移量，保留在文档流中），给子元素设置 position: absolute。这样子元素就能乖乖地在父元素的范围内随意定位了。
- 定位方式： 元素相对于最近的、已定位的（即 position 不是 static 的）祖先元素进行定位。
- 特点：
- 如果所有祖先元素都没有定位（都是 static），它就会相对于页面的
<html>初始包含块（也就是整个网页的左上角）进行定位。 - 完全脱离文档流： 元素不再占据原本的空间，后面的元素会像它不存在一样填补上来。
- 可以通过
top、right、bottom、left精确控制位置。
- 如果所有祖先元素都没有定位（都是 static），它就会相对于页面的
fixed（固定定位）
- 定位方式： 元素相对于**浏览器视口（Viewport，即屏幕可见区域）**进行定位。
- 特点：
- 完全脱离文档流。
- 不随滚动条滚动： 即使你上下滑动页面，这个元素也会像"钉子"一样死死钉在屏幕的某个位置（常用于网页顶部的导航栏、侧边的悬浮广告或"回到顶部"按钮）。
sticky（粘性定位）
- 定位方式： 它是
relative和fixed的结合体。 - 特点：
- 元素在跨越特定阈值（比如滚动到
top: 10px的位置）之前，表现为relative（随文档流正常滚动）。 - 一旦跨越阈值，它就会变成
fixed，固定在特定位置，直到它的父元素滚出视野。 - 注意： 使用时必须指定
top、right、bottom或left中的一个阈值，否则它只会像普通的relative一样。常用于通讯录的字母导航或表格的表头固定。
- 元素在跨越特定阈值（比如滚动到
总结对比表
| 属性值 | 定位基准（相对于谁） | 是否脱离文档流 | 常用场景 |
|---|---|---|---|
| static | 无（正常文档流） | 否 | 默认状态 |
| relative | 自身原始位置 | 否（保留原空间） | 微调位置、作为 absolute 的父容器 |
| absolute | 最近的非 static 祖先 | 是 | 弹窗、图标上的小红点、下拉菜单 |
| fixed | 浏览器视口（屏幕） | 是 | 顶部导航栏、悬浮按钮、客服图标 |
| sticky | 滚动容器 / 视口 | 视滚动状态而定 | 吸顶效果（如楼层导航、表头） |